<template>
	<view class="container">
		<view class="form">
			<view class="input-box">
				<u-input placeholder="请输入姓名" v-model="name"></u-input>
			</view>
			<view class="input-box">
				<u-input placeholder="请输入工号" v-model="employee_id"></u-input>
			</view>
			<u-button type="primary" @click="handleLogin">登录</u-button>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import {
		mapActions
	} from 'vuex';
	import {
		postlogin,
		finduser
	} from '@/api/api.js';

	export default {
		data() {
			return {
				name: '',
				employee_id: ''
			};
		},
		methods: {
			...mapActions(['userLoginAction']),
			//登录验证
			handleLogin() {
				if (!this.name || !this.employee_id) {
					wx.showModal({
						title: '提示',
						content: '请输入用户名和工号',
						showCancel: false
					});
					return;
				}
				
				postlogin(this.name,this.employee_id)
					.then(response => {
						console.log(response);
						if (response.length > 0) {
							this.loginafter()
						} else {
							uni.showModal({
								title: '登录失败',
								content: '请检查用户名和工号是否正确。',
								showCancel: false
							});
						}
					})
					.catch(error => {
						// 登录失败，处理错误
						console.log(error);
					});
			},
			async loginafter() {
				console.log("登录成功");
				let userInfo = {
					name: this.name,
					employee_id: this.employee_id
				}
				this.userLoginAction(userInfo)
			}
		},


	};
</script>

<style>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50vh;
		background-color: #f0f0f0;
		opacity: 0.9;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}


	.form {
		width: 80%;
		padding: 20px;
		border-radius: 10px;
		background-color: #ffffff;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.6);
	}

	.input-box {
		margin-bottom: 20px;
	}
</style>